<template>
  <div class="login-container">
    <el-link :underline="false">Without Underline</el-link>
    <el-form @submit.native.prevent="handleLogin" class="login-form">
      <el-form-item>
        <el-input v-model="email" placeholder="email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input v-model="password" type="password" placeholder="Password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">Login</el-button>
      </el-form-item>
    </el-form>

    <!-- 飞书登录区域 -->
    <div class="feishu-login" @click="redirectToFeishu"></div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { login } from '@/api/user'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { actions, menu_permission, token } from '@/api/auth'
import { userInfo } from '@/api/store'

const email = ref('')
const password = ref('')
const router = useRouter()

// 本地登录逻辑
const handleLogin = async () => {
  try {
    const response = await login({ email: email.value, password: password.value })
    ElMessage.success('登录成功')

    const authToken = response.data.data.token
    userInfo.username = response.data.data.username
    userInfo.email = response.data.data.email
    userInfo.id = response.data.data.id
    userInfo.avatar = response.data.data.avatar
    if (authToken) {
      token.value = authToken // 存储 token
      menu_permission.value = response.data.data.menu_permission
      actions.value = response.data.data.actions
    }
    router.push('/') // 跳转到主页
  } catch (error) {
    ElMessage.error('登录失败')
  }
}

// 飞书登录逻辑
const redirectToFeishu = () => {
  const appId = 'cli_a649b8920936d00c'
  const redirectUri = encodeURIComponent('http://127.0.0.1:5174/login/callback')
  const feishuAuthUrl = `https://open.feishu.cn/open-apis/authen/v1/authorize?app_id=${appId}&redirect_uri=${redirectUri}`

  // 重定向到飞书的授权页面
  window.location.href = feishuAuthUrl
}

// 动态加载飞书二维码 SDK 并初始化二维码
const loadFeishuSDK = () => {
  const script = document.createElement('script')
  script.src =
    'https://lf-package-cn.feishucdn.com/obj/feishu-static/lark/passport/qrcode/LarkSSOSDKWebQRCode-1.0.3.js'
  script.async = true
  script.onload = () => {
    new window.QRLogin({
      id: 'feishu-login',
      goto: 'https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=cli_a649b8920936d00c&redirect_uri=http://127.0.0.1:5174/login/callback&response_type=code&state=STATE',
      width: '300',
      height: '300',
      style: 'width:300px;height:300px' //可选的，二维码html标签的style属性
    })
  }
  document.body.appendChild(script)
}
</script>

<style scoped>
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* 占满整个视口高度 */
}

.login-form {
  max-width: 300px; /* 最大宽度 */
  width: 100%; /* 让表单宽度适应父容器 */
}

.feishu-login {
  margin-top: 20px;
  width: 200px; /* 图片宽度 */
  height: 50px; /* 图片高度 */
  background-image: url('@/assets/feishu.png'); /* 替换为飞书图片的路径 */
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
}
</style>
